<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
    <title>管理员-考评页面</title>
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/weui.min.css')}}">
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/jquery-weui.css')}}">
    <link rel="stylesheet" href="{{asset('/css/system/iconfont.css')}}">
    @if($skinid == 3)
        <link rel="stylesheet" href="/css/system/common.css?v=2018121301">
        <link rel="stylesheet" href="/css/system/index-view.css?v=2019053001">
    @elseif($skinid == 1)
        <link rel="stylesheet" href="/css/theme-blue/system/common.css">
        <link rel="stylesheet" href="/css/theme-blue/system/index-view.css?v=2019053001">
    @elseif($skinid == 2)
        <link rel="stylesheet" href="/css/theme-pink/system/iconfont-pink.css">
        <link rel="stylesheet" href="/css/theme-pink/system/common.css">
        <link rel="stylesheet" href="/css/theme-pink/system/index-view.css?v=2019053001">
    @endif
    <script src="{{asset('/kaohe/js/echarts-all.js')}}"></script>
    @include('sysadmin.head')
    <style>
        body {
            background: #fff;
        }

    </style>
</head>
<body ontouchstart>
<div class="index-review">
    <div class="header-bk">
        <div class="con-head">
            <img src="{{userlogo($perf->user_id)}}">
            <span class="user-name">{{getUserName($perf->user_id)}}</span>
            <div class="sec-li">
                <p class="score-list">综合绩效:{{$perf->total}}</p>
            </div>
        </div>
        <div class="list-content">
            <div class="section-li">
                <span class="circl-span sec-circle"></span>
                <p>业绩:</p>
                <p class="score-list">{{$perf->yeji}}</p>
            </div>
            <div class="section-li">
                <span class="circl-span third-circle"></span>
                <p>考勤:</p>
                <p class="score-list">{{$perf->kaoqin}}</p>
            </div>
            <div class="section-li">
                <span class="circl-span third-circle"></span>
                <p>奖惩:</p>
                <p class="score-list">{{$perf->jiangcheng}}</p>
            </div>
        </div>
    </div>
    <p class="p-title">月度意见</p>
    @if($is_origin==1)
        <div id="echart_ld" style="width:100%;height:300px"></div>
    @else
        <p style="text-align: center;height:300px"> 还没有收到评价意见</p>
    @endif

    <p class="p-title">年度考评</p>
    <div id="part2" style="width: 100%;height: 240px;">
    </div>

    <p class="p-title" style="margin-bottom: 40px;margin-top: 30px;">业绩明细</p>
    <div id="part3" style="width: 100%;height: 340px;">
    </div>

  <div style="height:0.5rem;"></div>
</div>
@include('sysadmin.admin-caidan')
<script src="{{asset('/kaohe/js/jquery-2.1.4.min.js')}}"></script>
<script src="{{asset('/addons/jquery-weui-build/js/fastclick.js')}}"></script>
<script src="{{asset('/kaohe/js/echarts.min.js')}}"></script>
<script>
    $(function () {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="{{asset('/addons/jquery-weui-build/js/jquery-weui.min.js')}}"></script>
<script>
    $('.kaohe-item').click(function () {
        $('.show-hidden').toggle();
    })
    $('.set-btn').click(function () {
        $('.set-hidden').toggle();
    })
    $('.admin-item').click(function () {
        $('.front-show-hidden').toggle();
    });

            @if($is_origin==1)
    var myChart_ld = echarts.init(document.getElementById('echart_ld'));
    option_ld = {
        tooltip: {
            trigger: 'axis'
        },

        polar: [
            {
                indicator: [
                        @foreach($name_opinion as $value)
                    {
                        text: '{{$value}}', max: 5
                    },
                    @endforeach
                ]
            }
        ],
        calculable: true,
        series: [
            {

                name: '综合得分',
                type: 'radar',
                data: [
                    {
                        value:{!! $value_opinion!!},
                        name: '得分'
                    }
                ]
            }
        ]
    };
    myChart_ld.setOption(option_ld);
            @endif


    var myChart2 = echarts1.init(document.getElementById('part2'));
    option2 = {
        @if($skinid == 3)
        color: ['#65B7B1'],
        @elseif($skinid == 1)
        color: ['#3983C5'],
        @elseif($skinid == 2)
        color:['#FEA8A9'],
        @endif
        legend: {
            data: ['绩效值'],
            right: 20
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '绩效值',
                type: 'bar',
                barWidth: '60%',
                markLine: {
                    data: [
                        {yAxis: 100, name: '满分线'}
                    ]
                },
                data:{!! $months !!}
            }
        ]
    };
    myChart2.setOption(option2);

    tisName={!! $tisName !!}
            tisNum={!! $tisNum !!}
            tisCol ={!! $tisCol !!}
            heig=tisName.length*32;

    $("#part3").css("height",heig);
    var myChart3 = echarts1.init(document.getElementById('part3'));

    option3 = {
        color: ['#95c7ff'],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: null // 默认为直线，可选为：'line' | 'shadow'
            },
            //backgroundColor: 'rgba(255,255,255,1)',
            //padding: [5, 10],
            //textStyle: {
            //color: '#7588E4',
            //},

            //formatter: '<div style="text-align: center;">流失用户金币分布</div>{b}  :  {c}'
        },
        grid: {
            left: '22%',
            right: '8%',
            bottom: '20%',
            top: '0%'
        },
        xAxis: [{
            type: 'value',
            // show: false
        }],
        yAxis: [{
            type: 'category',
            //boundaryGap: true,

            splitLine: {
                show: false,
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#609ee9'
                }
            },

            axisLabel: {
                // show:false,
                margin: 5,
                textStyle: {

                    fontSize: 12,
                    color:"rgba(11, 11,11,1)"
                }
            },

            data: tisName.reverse()
        }],
        series: [{
            type: 'bar',
            stack: '分数',
            barWidth: '60%',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = tisCol.reverse();
                        return colorList[params.dataIndex]
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    fontSize: 16,
                    // formatter: '{c}%'
                }
            },
            data: tisNum.reverse()
        }]
    };
    if (option3 && typeof option3 === "object") {
        myChart3.setOption(option3, true);
        // 使用刚指定的配置项和数据显示图表。
        // 处理点击事件并且跳转到相应的百度搜索页面


        myChart3.on('click', function (params) {

            console.log(params)
            window.open('/user/showTig?name=' + encodeURIComponent(params.name)+"&uid="+{{$uid}},'_self');
        });
    }

    myChart3.setOption( option3);
</script>
</body>
</html>